<?php $this->headScript()->appendFile($this->js('plugins/jquery.selectboxes.js'))
->appendFile($this->js('plugins/jquery.form.js'))
->appendFile($this->js('plugins/jquery.alerts.js'));
$this->headLink()->appendStylesheet($this->js('css/jquery.alerts.css'))
->appendStylesheet($this->Css('table.css'));
?>
<script>


$(document).ready(function(){

	// 取年級課程
	function getSubject() {
		 $("#append-area").hide();
	    $.getJSON('<?php echo $this->route("get-subject")?>',
	            {grade: $("#select-grade").val()},
	            function(data) {
	                 $("#select-subject").removeOption(/./);
	                 $("#select-subject").addOption('','<?php echo $this->translate("select course")?>');
	                 $("#select-subject").addOption(data, false);
	                 if ($("#select-subject").val() == '')
	                     $("#addButton").addClass('ui-state-disabled');

	            });

	}

    // 年級改變時
	$("#select-grade").change(function(){
		 $("#append-area").hide();
		getSubject();
		 $("#data-area").html('');
	});

    // 課程變更時
    $("#select-subject").change(function(){
    	$("#append-area").hide();
        var sn = $(this).val();
        $("#addButton").removeClass('ui-state-disabled');
        $.get('<?php echo $this->route("get-course")?>',{
            sn : sn
            }, function(data){
                $("#data-area").html(data);
             });
       });
      // 新增群組
    $("#addButton").click(function(){
        if ($(this).hasClass('ui-state-disabled'))
            return false;
        $.get('<?php echo $this->route("append-group")?>',{
            sn : $("#select-subject").val()
            },
            function(data){
            	$("#append-area").html(data);
                $("#append-area").slideDown();
                $("#group_name").focus();
             });
        });
	getSubject();
});
</script>
<style>
#data-area table {margin:5px; text-align:center;width:600px}

#append-area {display:none; margin:5px; padding:3px}
.fg-button {margin:0; font-size:12px}
</style>

<div id="select-area">
<form>
<select id="select-grade" name="select-grade">
<?php echo $this->ClassGradeOptions()?>
</select>
<select id="select-subject" name="select-subject">
</select>
<input type="button"  id="addButton" style="font-size:12px;margin:5px"
 class="fg-button ui-state-default  ui-state-disabled ui-corner-all"
value="<?php echo $this->translate('append group')?>" />
</form>
</div>
<div id="append-area">

</div>
<div id="data-area">

</div>

